<template>
  <sui-form>
    <sui-form-field>
      <label>用户名</label>
      <input
        placeholder="First Name"
        type="text"
        :value="name"
        @input="updateName"
      >
    </sui-form-field>
    <sui-form-field>
      <label>个性签名</label>
      <textarea
        rows="2"
        placeholder="First Name"
        :value="description"
        @input="updateDescription"
      ></textarea>
    </sui-form-field>
    <sui-form-field>
      <label>出生日期</label>
      <v-date-picker
        :value="birthday"
        @input="updateBirthday"
        is-expanded
      >
        <div
          class="ui action input"
          :type='inputState.type'
          slot-scope='{ inputValue, updateValue }'
        >
          <input
            type='text'
            icon='calendar'
            :value='inputValue'
            :placeholder='inputState.message'
            @change.native='updateValue($event.target.value)'
          >
          </input>
          <div
            @click='birthday = null'
            class="ui button"
          >Clear</div>
        </div>
      </v-date-picker>
    </sui-form-field>
    <sui-form-field>
      <label>所在国家</label>
      <ZuiCitySelector
        :city="location"
        v-on:onSelectCity="updateLocation"
      ></ZuiCitySelector>
    </sui-form-field>
  </sui-form>
</template>
<script>
import ZuiCitySelector from "@/components/ZuiCitySelector.vue";
import { mapState } from "vuex";
export default {
  name: "zui-form",
  components: { ZuiCitySelector },
  computed: {
    ...mapState({
      name: state => state.authentication.user.user.privacy.name,
      description: state => state.authentication.user.user.privacy.description,
      location: state => state.authentication.user.user.privacy.location,
      birthday: state => state.authentication.user.user.privacy.name
    }),
    inputState() {
      if (!this.selectedValue) {
        return {
          type: "is-danger",
          message: "Date required."
        };
      }
      return {
        type: "is-primary",
        message: ""
      };
    }
  },
  methods: {
    onSelectCity(value) {
      this.city = value;
    },
    updateName(e) {
      const playload = {
        message: "name",
        value: e.target.value
      };
      this.$store.commit("authentication/updatePrivacy", playload);
    },
    updateDescription(e) {
      const playload = {
        message: "description",
        value: e.target.value
      };
      this.$store.commit("authentication/updatePrivacy", playload);
    },
    updateLocation(e) {
      const playload = {
        message: "location",
        value: e.target.value
      };
      this.$store.commit("authentication/updatePrivacy", playload);
    },
    updateBirthday(e) {
      const playload = {
        message: "birthday",
        value: e.target.value
      };
      this.$store.commit("authentication/updatePrivacy", playload);
    }
  }
};
</script>
